<!-- author: lizq -->
<!-- date: 2022-07-12 15:09:44 -->
<!-- description: table + 排序 -->
<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :header-cell-class-name="handleHeaderClass"
    @selection-change="tableSelectionChange"
    @header-click="handleHeaderCLick"
    @sort-change="tableSortChange"
  >
    <!-- 内容 -->
    <slot name="content"></slot>
  </el-table>
</template>

<script setup>
defineProps({
  tableData: { type: Array, default: () => [] }
});
const $myemit = defineEmits(["selection-change", "sort-change"]);
//table多选
const tableSelectionChange = (val) => {
  $myemit("selection-change", val);
};
//自定义排序数据
const ordersList = [];
// 设置列的排序为我们自定义的排序
const handleHeaderClass = ({ column }) => {
  column.order = column.multiOrder;
};
//列表筛选
const tableSortChange = ({ column }) => {
  if (column != null) {
    // 有些列不需要排序，提前返回
    if (column.sortable !== "custom") {
      return;
    }
    if (!column.multiOrder) {
      column.multiOrder = "descending";
    } else if (column.multiOrder === "descending") {
      column.multiOrder = "ascending";
    } else {
      column.multiOrder = "";
    }
    handleOrderChange(column.property, column.multiOrder);
  }
};
// 点击表头
const handleHeaderCLick = (column) => {
  let { sortable } = column;
  if (sortable !== "custom") {
    return;
  }
  if (!column.multiOrder) {
    column.multiOrder = "descending";
  } else if (column.multiOrder === "descending") {
    column.multiOrder = "ascending";
  } else {
    column.multiOrder = "";
  }
  handleOrderChange(column.property, column.multiOrder);
};
//排序数据过滤
const handleOrderChange = (orderColumn, orderState) => {
  let result = ordersList.find((e) => e.orderColumn === orderColumn);
  if (result) {
    result.orderState = orderState;
  } else {
    ordersList.push({
      orderColumn: orderColumn,
      orderState: orderState
    });
  }

  $myemit("sort-change", ordersList);
};
</script>

<style scoped lang="scss"></style>
